<template>
  <div class="vue-box">
    <div v-if="m != null" class="c-panel">
      <!-- tab卡片 -->
      <el-tabs v-model="activeTab" class="s-tab">

        <el-alert style="margin: 10px 0;"
                  type="blue" show-icon
                  title="车型管理"
        >
        </el-alert>
<!--        头部分割线-->
        <el-tab-pane label="czg-车型管理" name="tab1"></el-tab-pane>

          <el-row style="margin-top:20px">
            <el-col :span="8"><div></div></el-col>
            <el-col :span="8"><el-input placeholder="车辆类型/准载重量/准载体积" v-model="integration" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="2"><el-button @click="truckTypeSearch" type="primary" icon="el-icon-search" circle></el-button></el-col>
          </el-row>

        <el-row style="margin-top:20px">
          <el-col :span="1"><div></div></el-col>
          <el-col :span="2"><el-button icon="el-icon-plus" type="primary" @click="increased">新增</el-button></el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-col :span="1"><div></div></el-col>
          <el-col :span="22">
            <el-table :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}">
              <!--checkbox全选框配置-->
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column prop="id" v-if="false" label="车型ID" align="center" width="120">
              </el-table-column>
              <el-table-column prop="name" label="车辆类型名称" align="center" width="120">
              </el-table-column>
              <el-table-column prop="allowableLoad" label="准载重量" align="center" width="140">
              </el-table-column>
              <el-table-column prop="allowableVolume" label="准载体积" align="center">
              </el-table-column>
              <el-table-column prop="measureLong" label="长" align="center">
              </el-table-column>
              <el-table-column prop="measureWidth" label="宽" align="center" width="120">
              </el-table-column>
              <el-table-column prop="measureHigh" label="高" align="center" width="140">
              </el-table-column>
              <el-table-column prop="status" label="状态" align="center" :show-overflow-tooltip="true">
                <template v-slot="kk">
                  <el-switch
                    v-model="kk.row.status"
                    :active-value=1
                    :inactive-value=0
                    @change="changeTruckerType(kk.row)"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template v-slot="pp">
                  <el-link type="warning" icon="el-icon-edit" style="margin-right:10px" @click="compile(pp.row)">编辑</el-link>|
                  <el-link type="danger" icon="el-icon-delete-solid" @click="remove(pp.row)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <el-dialog
          :title="height"
          :visible.sync="dialogVisible"
          width="35%"
          :before-close="handleDialogClose"
        >

          <el-form :model="truckType" ref="truckType" label-width="120px"  class="demo-ruleForm">

            <el-row style="margin-top:10px" hidden>
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div>
                  <el-form-item>
                    <el-input  v-model="truckType.id"  style="width: 180px;" size="small"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

              <!--第一行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div>
                    <el-form-item label="车辆类型名称:" prop="name" :rules="{required: true, message: '车辆类型名称不能为空', trigger: 'blur' }">
                      <el-input  v-model="truckType.name"  style="width: 180px;" size="small" placeholder="请输入车辆类型名称"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <!--第二行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="准载重量:" prop="allowableLoad" :rules="{required: true, message: '准载重量不能为空', trigger: 'blur' }">
                      <el-input v-model="truckType.allowableLoad" style="width: 180px;" size="small" placeholder="请输入准载重量"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <!--第三行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="准载体积:" prop="allowableVolume" :rules="{required: true, message: '准载体积不能为空', trigger: 'blur' }">
                      <el-input v-model="truckType.allowableVolume"  style="width: 180px;" size="small" placeholder="请输入准载体积"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <!--第四行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="长:" prop="measureLong" :rules="{required: true, message: '长度不能为空', trigger: 'blur' }">
                      <el-input v-model="truckType.measureLong" style="width: 180px;" size="small" placeholder="请输入长度"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <!--第五行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="宽:" prop="measureWidth" :rules="{required: true, message: '宽度不能为空', trigger: 'blur' }">
                      <el-input v-model="truckType.measureWidth" style="width: 180px;" size="small" placeholder="请输入宽度"></el-input>
                    </el-form-item>
                  </div>
                </el-col>

              </el-row>

              <!--第六行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="高:" prop="measureHigh" :rules="{ required: true, message: '高度不能为空', trigger: 'blur' }">
                      <el-input v-model="truckType.measureHigh" style="width: 180px;" size="small" placeholder="请输入高度"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel('truckType')" round style="margin-right:60px">取 消</el-button>
            <el-button type="primary" round style="margin-right:200px" @click="confirm('truckType')">确定</el-button>
          </span>

        </el-dialog>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-tabs>


    </div>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  name: 'sp-basics-motorcycle',
  data() {

    const time={
      id:'',
      name:'',
      allowableLoad:'',
      allowableVolume:'',
      measureLong:'',
      measureWidth:'',
      measureHigh:'',
      status:'',
    }

    return {
      tableData:[time],
      //分页信息
      currentpage:1,
      pagesize:5,
      total:0,
      //搜索框的参数绑定
      integration:'',
      m: null,		//
      activeTab: 'tab1', // 当前显示的tab
      //打开或关闭对话框
      dialogVisible:false,
      //对话框头部
      height:'',
      //确定操作
      status:'',
      truckType:{
        id:'',
        name:'',
        allowableLoad:'',
        allowableVolume:'',
        measureLong:'',
        measureWidth:'',
        measureHigh:'',
        status:'',
      }

    }
  },
  async created(){
    let kk= await this.f5();
    this.truckTypePage();

  },
  methods: {
    // 创建一个默认cfg对象
    create_m: function() {
      return {
        logoUrl: '',	// 系统logo地址
        appName: this.$root.title || '', // 系统名称
        appVersionNo: 'v1.0.0',	// 系统版本
        appVersionLog: '更新于2099-10-1',	// 更新日志
      }
    },
    // 初始化配置
    init: function(str) {
      // 获取
      var cfg = sa.JSONParse(str, {});	// 用户配置
      var default_cfg = this.create_m();		// 默认配置
      // 遍历
      for (var key in default_cfg) {
        if (cfg[key] !== undefined && cfg[key] !== null) {
          default_cfg[key] = cfg[key];
        }
      }
      // 赋值
      this.m = default_cfg;
    },
    // 刷新
    f5: function(){
      sa.ajax('/SpCfg/getCfg', { cfgName: 'app_cfg' }, function(res){
        this.init(res.data);
      }.bind(this));
    },
    // 新增车辆类型
    increased(){

      this.dialogVisible=true;

      this.status='save';

      this.height='新增车辆类型';
    },
    //编辑车辆类型
   async compile(truckType){

      this.dialogVisible=true;

      this.status='update';

      this.height="编辑车辆类型";

      this.truckType=JSON.parse(JSON.stringify(truckType));

    },
    //分页查询车辆类型
    async truckTypePage(){

      let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/truckTypePage',{
        currentpage: this.currentpage,
        pagesize : this.pagesize,
        integration : this.integration,
      });
      this.tableData=axiosResponse.data.list
      this.total=axiosResponse.data.total
    },
    //分页的条数
    handleSizeChange(val){

      this.pagesize=val;
      this.truckTypePage();

    },

    //分页的页数
    handleCurrentChange(val){

      this.currentpage=val;
      this.truckTypePage();

    },
    //增加编辑车辆类型
    confirm(truckType){

      if(this.status=='save'){

        this.$refs[truckType].validate(async(valid) => {

          if (valid) {

            let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/saveTruckType',this.truckType);


            if (axiosResponse.data == true) {

              this.$message({
                type: 'success',
                message: '新增车辆类型成功'
              });

              this.cancel(truckType);

              this.truckTypePage();

            } else {

              this.$message({
                type: 'error',
                message: '新增车辆类型失败',
                duration: 1000,
              });

              this.cancel(truckType);

            }

          }

        })

          }else {

            this.$refs[truckType].validate(async(valid) => {

              if (valid) {

                let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/updateTruckType',this.truckType)

                if(axiosResponse.data==true){

                  this.$message({
                    type: 'success',
                    message: '编辑车辆类型成功'
                  });

                  this.cancel(truckType);

                  this.truckTypePage();

                } else {

                  this.$message({
                    type: 'error',
                    message: '编辑车辆类型失败',
                    duration: 1000,
                  });

                  this.cancel(truckType);

                }

              }

            })

        }

    },
    //取消车辆类型
    cancel(truckType){

      this.dialogVisible=false;
      this.truckType={};
      this.$refs[truckType].resetFields();

    },
    //删除车辆类型
    remove(truckType){

      this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {

        let axiosResponse = await axios.post('/api/pd-basecjj/pd-trucker-type/deleteTruckerType/',truckType);

        if (axiosResponse.data == true) {

          this.$message({
            type: 'success',
            message: '删除车辆类型成功'
          });

          this.dialogVisible=false;

          this.cancel(truckType);

        }else{

          this.$message({
            type: 'error',
            message: '删除车辆类型失败'
          });

          this.cancel(truckType);

        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //对话框的回调
    handleDialogClose(){

      this.dialogVisible=false;

      this.truckType={}

    },
    //搜索
    truckTypeSearch(){

      this.truckTypePage();

    },
    //车辆类型状态
   async changeTruckerType(truckType){

     let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/updateTruckType',truckType)

      if(axiosResponse.data==true){

        this.$message({
          type: 'success',
          message: '编辑车辆类型成功'
        });

        this.truckTypePage();

      } else {

        this.$message({
          type: 'error',
          message: '编辑车辆类型失败',
          duration: 1000,
        });
      }
    }
  }
}
</script>

<style scoped>

.vue-box{height: 100%; overflow: hidden;}

.c-panel{height: calc(100% - 0em); position: relative;}

.s-tab{height: 100%; }

.el-col{
  border: 1px solid transparent;
}

.el-dialog__header {
  padding:10px 10px 10px;
  background-color: rgb(0, 255, 255)
}



</style>
